<template>
<div>
    <!-- //头部 -->
    <div>

<van-nav-bar
  title="标题"
  left-arrow
  @click-left="$router.push('/layout/search')"
/>
<!-- 图片 -->
 <van-image
  src="https://img01.yzcdn.cn/vant/cat.jpeg"
 />
    </div>
    <!-- 中间 -->
  <div class='middle'>
    <div class='my'>
      <p> 我</p>
      <span>近地铁</span>
      </div>
<van-divider
  :style="{ color: '#d1d1d1', borderColor: '#d1d1d1', padding: '0 16px' }"
/>
<div class='my1'>
<!-- 每个元素的两侧间隔相等 -->
<van-row type="flex" justify="space-around">
  <van-col span="6">
   <p> 21/月</p>
   <span>租金</span>
    </van-col>
  <van-col span="6">
    <p> 一室</p>
   <span>房型</span>
    </van-col>
  <van-col span="6">
     <p> 3平方米</p>
   <span>面积</span>
    </van-col>
</van-row>
<van-divider
  :style="{ color: '#d1d1d1', borderColor: '#d1d1d1', padding: '0 10px' }"
/>
</div>

  </div>
    <div class='my2'>
    <!-- 每个元素的两侧间隔相等 -->
   <van-row type="flex" justify="space-around">
  <van-col span="10">
    <p>装修:&nbsp;<span>精修</span></p>
    <p>楼层:&nbsp;<span>高楼层</span></p>
      </van-col>
      <van-col span="10">
    <p>朝向:&nbsp;<span>东</span></p>
    <p>类型:&nbsp;<span>普通住宅</span></p>
  </van-col>
  </van-row>
  </div>
  <!-- 小区地图 -->
  <div class='map'>
    <p>小区：<span>天山星城</span></p>

  </div>
  <!-- 房源概况 -->
  <div class='gaikuang'>
    <van-row type="flex" justify="left">
  <van-col span="6" class='p1'>
  <p> 房屋概况</p>
  </van-col>
  </van-row>
  </div>
  <van-divider
  :style="{ color: '#d1d1d1', borderColor: '#d1d1d1', padding: '0 16px' }"
  />
  <div class='title'>
    <van-image
      round
      width="1.5rem"
      height="1.5rem"
      src="https://img01.yzcdn.cn/vant/cat.jpeg"
    />
    <div class='tmiddle'>
        <p>王女士</p>
        <span><van-icon name="diamond-o" size="15" />已认证房主</span>
    </div>
  </div>
   </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
/deep/.van-icon-diamond-o{
 margin-top: 10px;
margin-right: 5px;
}
.tmiddle p{
font-size:14px ;
margin-bottom:-2px ;
}
.title .tmiddle{
margin-top: -8px;
margin-left: 20px;
}
.tmiddle span{
  font-size: 12px;
  color:red;

}
/deep/ .van-image--round {
margin-left: 10px;

}
.title{
display: flex;
}
.gaikuang{
  height: 30px;

}
.p1 p{
  font-size: 16px;
  font-weight: 700;
  margin-left: 20px;
}
.map{
  margin-top: 30px;
  height:100px ;
  background-color: pink;
}
.map p{
  font-size: 12px;
  margin-left: 20px;
  color:#866e6b;
}
.map span{
   color:#373737;
}
.my2{
  margin-left: 8px;
height: 40px;
font-size: 12px;
}
.my2 p{
  color:#baa499;
}
.my2 span{
  color:#373737;
}
.my1{
  margin-left: 20px;
  height: 30px;
  margin-top: -16px;
}
.my1 p{
 margin-bottom: -3px;
font-size: 16px;
color: red;
}
.my1 span{
  margin-left: 5px;

 font-size: 12px;
color: #cec9be;
}
.middle{
height: 150px;
// background-color: pink;
margin-top: -10px;
}
.my {
height: 50px;
margin-left: 15px;
}
.my p{
font-size: 16px;
margin-bottom: -1px;
}
.my span{

  font-size: 12px;
  background: #e2f5f8;
  color:#4bbcd6;
}
/deep/.van-icon-arrow-left{
color:white
}
</style>
